<template>
<!--  <el-dialog :title="`耗材详情`"-->
<!--             :close-on-click-modal="false"-->
<!--             :visible="isVisible"-->
<!--             @open="handleOpen"-->
<!--             @close="handleClose"-->
<!--             width="80%"-->
<!--             height="80%"-->
<!--             style="overflow-y: auto;"-->
<!--  >-->
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <div>
            <div >
              <el-row>
                <el-card class="infoCard" >
                  <div class="textcenter  mh200">
                    <img src="http://localhost/static/img/logo.4eeb8a8e.png" alt="">
                  </div>
                  <h2 class="textcenter">{{tableData.materialName}}</h2>
                  <div class="textcenter fno">{{tableData.materialNo}}</div>
                  <div class="textcenter">
                    <el-button type="primary">编辑</el-button>
                    <el-button type="warning" @click="disabled">{{statusButton}}</el-button>
                  </div>
                  <el-row>
                    <el-col span="12">应用科室：{{tableData.deptName}}</el-col>
                    <el-col span="12">规格：{{tableData.packAge}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">耗材类型：{{tableData.type}}</el-col>
                    <el-col span="12">存储温度：{{tableData.temperature}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">保质期（月）：{{tableData.shelflife}}</el-col>
                    <el-col span="12">单位：{{tableData.unit}}</el-col>
                  </el-row>
                  <el-row>
                    <el-col span="12">状态：{{status}}</el-col>
                    <el-col span="12">所属厂商：{{tableData.manufacturer}}</el-col>
                  </el-row>
                  <div>样本类型：{{tableData.model}}</div>
                  <div>可检项目：{{tableData.projectName}}</div>
                  <div>配套仪器：{{tableData.instrumentName}}</div>
                  <div>备注：{{tableData.remark}}</div>
                  <el-row>
                    <el-col span="12">创建人：管理员</el-col>
                    <el-col span="12">创建时间：{{tableData.createTime}}</el-col>
                  </el-row>
                </el-card>

              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="入库记录" name="putInList">
                <putInList :user="user" />
              </el-tab-pane>
              <el-tab-pane label="出库记录" name="outList">
                <outList :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
<!--  </el-dialog>-->
</template>

<script>
import consumAvatar from "./consumAvatar";
import putInList from "./putInList";
import outList from "./outList";
import {getMaterialDetail, materialStatusChange} from '../../../../api/business/material'

export default {
  name: "detail",
  components: { consumAvatar, putInList, outList },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    checkId: {
      type: String,
      default: ''
    }
  },
  computed:{
    statusButton(){
      if(this.tableData.status==0) return '启用';
      if(this.tableData.status!=0) return '禁用';
    },
    status(){
  if(this.tableData.status==0) return '禁用';
  if(this.tableData.status!=0) return '启用';
}
  },
  data() {
    return {
      user: {},
      activeTab: "putInList",
      deviceInfo: {},
      tableData: {},
      id:null
    };
  },
  created() {
      this.id = this.$route.query.id
      if (this.id) {
        this.visible = false
        this.handleGetDetail(this.id)
      }
  },
  methods: {
    // 获取详情
    handleGetDetail(id) {
      getMaterialDetail(id).then((res) => {
        this.tableData=res.data
        // this.form = res.data
      })
    },
    // 启用/禁用
    statusChange(data) {
      materialStatusChange(data).then((res) => {
        this.reload();
      })
    },
    handleOpen() {

    },
    handleSubmit() {

    },
    handleClose() {
      this.$emit('close', false)
    },
    disabled(){
     var status= this.tableData.status > 0 ? 0 : 1;
     this.tableData.status=status;
    this.statusChange(this.tableData)
    }
  }
};
</script>
